<!DOCTYPE html>
<html lang="zh-CN"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>订单详情</title>
    <meta name="keywords" content="订单详情" />
    <meta name="description" content="订单详情" />
    <meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1,minimum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="width=device-width,viewport-fit=cover">
    <link th:href="@{/shoppingApi/css/public.css}" rel="stylesheet">
    <link th:href="@{/shoppingApi/css/weui.min.css}" rel="stylesheet">
    <link th:href="@{/shoppingApi/css/jquery-weui.min.css}" rel="stylesheet">
    <link th:href="@{/shoppingApi/css/order.css}" rel="stylesheet">
    <meta name="_csrf" th:content="${_csrf.token}"/>
    <meta name="_csrf_header"  th:content="${_csrf.headerName}"/>
    <!--<link th:href="@{/shoppingApi/css/weui.min.css}" rel="stylesheet">-->
    <!--<link th:href="@{/shoppingApi/css/jquery-weui.min.css}" rel="stylesheet">-->
    <style>
        .addr-button{
            float: right;
            margin-right: 20px;
            margin-top: 10px;
            margin-bottom: 10px;
            width: 80px;
            height: 27px;
            border-radius: 10px;
            border: 1px solid #3c3c3c;
            background: white;
        }
        .order-status-text{
        background:white;
        color:black;
        border-top:1px solid #DDDDDD;
        height: 50px;
        padding-left: 10px;
        }
        .back-text{
            float: left;
            font-size: small;
            margin-top: 10px;
            /*height:27px;line-height:27px;padding:0 10px;border-radius:10px;border:1px solid #ccc;*/
        }
    </style>
</head>
<body>
<div class="main ordercon">
    <div class="main_con c323232">
        <!--<p class="order_title pl15 pr15 bgfff ft17 c323232 ftc flex flex-ac">-->
        <!--<img class="back" src="./images/back.png">-->
        <!--<span class="it1">订单详情</span>-->
        <!--</p>-->
        <div class="bgfff">
            <div class="ordercon_status flex cfff flex-pj">
                <div>
<p style="line-height:48px;" class="ft17   pay-order-status" th:if="${orderDetails.order.orderStatus=='701'}"  th:text="${'待付款'}"></p>
                    <p style="line-height:48px;" class="ft17   pay-order-status" th:if="${orderDetails.order.orderStatus=='702'}"  th:text="${'待发货'}"></p>
                    <p style="line-height:48px;" class="ft17   pay-order-status" th:if="${orderDetails.order.orderStatus=='703'}"  th:text="${'待收货'}"></p>
                    <p style="line-height:48px;" class="ft17   pay-order-status" th:if="${orderDetails.order.orderStatus=='704'}"  th:text="${'待评价'}"></p>
                    <p style="line-height:48px;" class="ft17   pay-order-status" th:if="${orderDetails.order.orderStatus=='705'}"  th:text="${'交易完成'}"></p>
                    <p style="line-height:48px;" class="ft17   pay-order-status" th:if="${orderDetails.order.orderStatus=='706'}"  th:text="${'已取消'}"></p>
                    <!--<p class="ft10">(30分钟内可修该地址)</p>-->
                </div>
                <div class="ft15">
                    <p>
                        <!--<span class="days">0</span>天-->
                        <!--<span class="hours">00</span>小时-->
                        <!--<span class="minutes">00</span>分钟-->
                        <!--<span class="seconds">00</span>秒</p>-->
                    <p style="text-align: center;font-size: 14px">(30分钟内可修该地址)</p>
                </div>
            </div>
            <div class="address ml15 mr15 pt25 pb25 bgfff pl15 pr15 flex arrow bold" th:data="${orderDetails.isMoreAddress}" onclick="setAddress(this)">
                <img class="mt5" th:src="@{/shoppingApi/images/ordercity.png}">
                <div class="ft17 c323232 ml10 it1 pr20">
                    <p>
                        <span th:text="${orderDetails.address.name}"></span>
                        <span class="ml25" th:text="${orderDetails.address.phone}"></span>
                        <input type="hidden" class="addrId" name="addrId" th:value="${orderDetails.address.Id}"/>
                    </p>
                    <p class="ft14 mt10" th:text="${orderDetails.address.provinceName+orderDetails.address.cityName+orderDetails.address.areaName+orderDetails.address.detailAddr}"></p>
                </div>
            </div>
            <div class="ordercon_good mt10">
                <p class="shop flex flex-ac pl15">
                    <img src="/shoppingApi/images/carttip.png">
                    <span class="ml15 ft17 c323232">新零售微店</span>
                </p>
            </div>
            <div th:each="model:${orderDetails.orderDetails.orderDetailsProducts}">
                <div class="ordercon_good mt10">
                    <a th:href="${'/wap/getDetails?productId='+model.productId}" class="pl15 pr15 pt10 pb10 flex db">
                        <img class="pic" th:src="${'http://xlspic.ycsqd.com'+model.imgUrl}">
                        <div class="it1 ml15">
                            <p class="ft17 c323232 mt5" th:text="${model.productName}"></p>
                            <p th:if="${model.isMoreAddress==0}" class="ft14 c323232 mt5" th:text="${model.productDesc}"></p>
                            <!--<p th:if="${model.isMoreAddress==1}" class="ft14 c323232 mt5" th:text="${'地址:'+model.logName+'-'+model.phone+'-'+model.addressAll}"></p>-->
                            <p class="cf70029 mt5">
                                <!--<span class="ft17" th:text="${'￥'+model.productPrice}"></span>-->
                                <!--<span class="fr ft17 c323232" th:text="${'×'+model.productCount}"></span>-->
                                <span th:if="${model.isMoreAddress==0}" class="ft17" th:text="${'￥'+model.productPrice}"></span>
                                <!--<span th:if="${model.isMoreAddress==1}" class="ft17" th:text="${''}"></span>-->
                                <!--<span th:if="${model.isMoreAddress==1}"  class="fr ft17 c323232" th:text="${'×'+model.productCount+'件'}"></span>-->
                                <span th:if="${model.isMoreAddress==0}"  class="fr ft17 c323232" th:text="${'×'+model.productCount}"></span>
                            </p>
                        </div>
                    </a>
                    <div class="line"></div>
                </div>
            </div>

            <div>
                <div class="line"></div>
                <div class="cost c323232 ft17 bgfff">
                    <!--<p th:if="${orderDetails.isMoreAddress==1}" class="costtitle pl15 pr15">上面的是每个地址发货的实际活动产品数量</p>-->
                    <p class="costtitle pl15 pr15">费用明细</p>
                    <div class="costcon pb5">
                        <p class="ft15 c646464 pl15 pr15 pt5 overflow">
                            <span class="fl">商品金额</span>
                            <span class="fr ft15">
                            <span th:text="${'￥'+orderDetails.order.orderMoney}"></span>
                    </span>
                        </p>
                        <p class="ft15 c646464 pl15 pr15 pt5 overflow">
                            <span class="fl" th:text="${orderDetails.WebConfig.finacename2}"></span>
                            <span class="fr ft15">
                            <span th:text="${'-￥'+orderDetails.order.coupon}"></span>
                    </span>
                        </p>
                        <p class="ft15 c646464 pl15 pr15 pt5 overflow">
                            <span class="fl" th:text="${orderDetails.WebConfig.finacename3}"></span>
                            <span class="fr ft15">
                            <span th:text="${'-￥'+orderDetails.order.cashCoupon}"></span>
                    </span>
                        </p>
                        <p class="ft15 c646464 pl15 pr15 pt5 overflow">
                            <span class="fl">会员节省</span>
                            <span class="fr ft15">
                            <span th:text="${'-￥'+#numbers.formatDecimal(orderDetails.order.memberSave, 1, 2)}"></span>
                    </span>
                        </p>
                    </div>
                </div>
                <div class="line"></div>
            </div>
            <!--运费-->
            <div class="pl15 pr15 ft17 pb10">
                <p class="overflow pt10">
                    <span class="fl c323232">运费（快递）</span>
                    <span class="ft15 fr c323232">
                        <span class="ft14">+￥</span>
                        <span th:text="${orderDetails.order.freight}"></span>
                    </span>
                </p>
                <p class="overflow pt10">
                    <span class="fl c323232">总实付款</span>
                    <span class="ft15 fr cf70029">
                        <span class="ft14">￥</span>
                        <span th:text="${orderDetails.order.freight+orderDetails.order.realPay}"></span>
                    </span>
                </p>
            </div>
            <div class="line"></div>
            <div class="pl15 pr15 ft17 pb10 c323232">
                <p class="overflow pt10">
                   <span>订单编号:<span><span class="copy-orderNo" id="copy-orderNo" th:text="${orderDetails.order.orderNo}"></span>
                    <span class="ft15 fr c323232 copy">复制</span>
                    <input type="hidden" class="order-status" name="orderStatus" th:value="${orderDetails.order.orderStatus}"/>
                </p>
                <p class="overflow pt10">
                    <span th:text="${'下单时间:'+#dates.format(orderDetails.order.pOrderTime, 'yyyy-MM-dd')}"></span>
                    <span class="pl25" th:text="${#dates.format(orderDetails.order.pOrderTime, 'HH:mm:ss')}"></span>
                </p>
                <p class="overflow pt10">
                    <!--<span id="time" th:time="${#dates.format(orderDetails.order.payTime, 'yyyy-MM-dd HH:mm:ss')}" th:text="${'付款时间:'+#dates.format(orderDetails.order.payTime, 'yyyy-MM-dd')}"></span>-->
                    <!--<span class="pl25"th:text="${#dates.format(orderDetails.order.payTime, 'HH:mm:ss')}"></span>  -->
                    <span id="time" th:orderstate="${orderDetails.order.orderStatus}" th:if="${orderDetails.order.payTime!=null}" th:time="${#dates.format(orderDetails.order.payTime, 'yyyy-MM-dd HH:mm:ss')}" th:text="${'付款时间:'+#dates.format(orderDetails.order.payTime, 'yyyy-MM-dd')}"></span>
                    <span class="pl25"th:text="${#dates.format(orderDetails.order.pOrderTime, 'HH:mm:ss')}"></span>
                </p>
            </div>
            <div class="line"></div>
            <div class="fixedBox50" style="height: 85px;">
                <div class="fixed-bottom bottom ftc bgfff">
<p class="backmoney ft17" th:if="${orderDetails.WebConfig.cashcouponmul!=0}" th:text="${'该单可返回￥'+((orderDetails.order.realPay+orderDetails.order.freight)*orderDetails.WebConfig.cashcouponmul)+orderDetails.WebConfig.finacename3}"></p>
                    <div class="flex flex-pj">
                        <p class="it1">
                            <img src="/shoppingApi/images/orderpeople.png">
                            <span class="ml10" href="javascript:alert('敬请期待...')">联系客服</span>
                        </p>
                        <p class="lineh"></p>
                        <p class="it1">
                            <img src="/shoppingApi/images/orderphone.png">
                            <span class="ml10">拨打电话</span>
                        </p>
                    </div>
                    <!--<p class="bgf70029 ft17 ftc cfff">单处理中.....</p>-->
                    <div class="bgf70029 ft17 ftc cfff order-status-text flex" style="display: none;">
                        <div class="back-text" onclick="location.href='/wap/openUserCenter'">&lt;&lt;返回个人中心</div>
                        <!--<div class="" onclick="location.href='/wap/openUserCenter'">取消订单</div>-->
                        <!--<div class="" onclick="location.href='/wap/openUserCenter'">立即付款</div>-->
                         <!--<input style="border-color:#ccc;" class="addr-button" type="button" name="update-addr" th:value="修改地址"/>-->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--<a class="back-user-btn" href="/wap/openUserCenter"><span>返回个人中心</span></a>-->
<!--快速导航-->
<div class="mini-mask"></div>
<div class="mini-btn"></div>
<div class="mini-nav">
    <ul>
        <li><a href="/">
            <h5>首页</h5>
        </a></li>
        <li><a href="/wap/selectProductYJAndRjClassfy">
            <h5>分类</h5>
        </a></li>
        <li><a href="javascript:sharebtn()">
            <h5>分享</h5>
        </a></li>
        <li><a href="/wap/openUserCenter">
            <h5>个人中心</h5>
        </a></li>
        <li><a href="javascript:alert('敬请期待...')">
            <h5>店铺</h5>
        </a></li>
        <li><a href="/wap/getCartList">
            <h5>购物车</h5>
        </a></li>
        <li><a href="javascript:alert('敬请期待...')">
            <h5>联系客服</h5>
        </a></li>
    </ul>
</div>
<div id="mini-popup" class="weui-popup__container popup-bottom">
    <div class="weui-popup__overlay"></div>
    <div class="weui-popup__modal share-layer">
        <p class="flex mt20 mb20 flex-ac pl15 pr15">
            <span class="ml20 mr20 it1 lineh1"></span>
            <span class="ft14 c323232">分享到</span>
            <span class="ml20 mr20 it1 lineh1"></span>
        </p>
        <ul class="overflow ft14 c323232 ftc">
            <li id="miniShareMessage">
                <img class="wxhaoyou" th:src="@{/shoppingApi/images/share1.png}">
                <p class="mt10 ">微信好友</p>
            </li>
            <li id="miniShareTimeline">
                <img th:src="@{/shoppingApi/images/share2.png}">
                <p class="mt10">朋友圈</p>
            </li>
        </ul>
        <img class="close close-popup" th:src="@{/shoppingApi/images/close3.png}">
    </div>
</div>
<!--/快速导航-->
</body>
<script th:src="@{/shoppingApi/js/jquery-3.3.1.min.js}"></script>
<script th:src="@{/shoppingApi/js/jquery-weui.min.js}"></script>
<script th:src="@{/shoppingApi/js/common.js}"></script>
<script th:src="@{/shoppingApi/js/moment.js}"></script>
<script type="text/javascript" th:src="@{/shoppingApi/js/plusShare.js}"></script>
<script th:src="@{/shoppingApi/js/mininav.js}"></script>

<script type="application/javascript">
    // 双击返回按钮退出应用
    $(function () {
        if (navigator.userAgent.indexOf("Html5Plus") > -1) {
            var first = null;
            mui.back = function () {
                //首次按键，提示‘再按一次退出应用’
                if (!first) {
                    location.href = '/wap/getOrderList?orderStatus=0';
                }
            };
        }
    });

    var t = $("#time").attr('time');
    var orderstate=parseInt($.trim($("#time").attr('orderstate')));
    var istrue=1;
    var starttime = moment(t, 'YYYY-MM-DD HH:mm:ss').add(30, 'Minutes');//.format('YYYY-MM-DD HH:mm:ss');

    if(orderstate!=701){
        var time = setInterval(function () {
            var nowtime = moment();
            //var timestamp = starttime - nowtime;
            var du = moment.duration(starttime - nowtime, 'ms');
            if(du>0){
                // var days = parseInt(timestamp / 1000 / 60 / 60 / 24, 10); //计算剩余的天数
                // var hours = parseInt(timestamp / 1000 / 60 / 60 % 24, 10); //计算剩余的小时
                // var minutes = parseInt(timestamp / 1000 / 60 % 60, 10); //计算剩余的分钟
                // var seconds = parseInt(timestamp / 1000 % 60, 10); //计算剩余的秒数
                var hours = du.get('hours'),
                    mins = du.get('minutes'),
                    ss= du.get('seconds');
                //days = checkTime(days);
                var  hours = checkTime(hours),
                    minutes = checkTime(mins),
                    seconds = checkTime(ss);
                //$(".ordercon_status .days").text(days);
                $(".ordercon_status .hours").text(hours);
                $(".ordercon_status .minutes").text(minutes);
                $(".ordercon_status .seconds").text(seconds);
                du--;
            }else{
                istrue=0;
                var days='00';
                var hours='00';
                var minutes='00';
                var seconds='00';
                clearInterval(time)
            }
        },1000)
    }

    function checkTime(i){//checkTime函数，设置小于10的时间数字格式，例如5秒显示成05秒
        if (i<9)
        {i="0" + i}
        return i
    }

    $(".copy").on('click',function () {
        var copyOrderNo=$('.copy-orderNo').html();
        copyToClipboard(copyOrderNo);
        // $.toast("复制成功！","text");
    })

$(function () {
    $.toast("请确认收货地址！", "text");
})
   /*修改地址*/
    // $('.addr-button').on('click',function () {
    //     var addrId=$('.addrId').val();
    //     window.location.href="/wap/myAddressEdit?id="+addrId;
    // })
    // 修改地址
    function setAddress (obj) {
        var isMoreAddress=parseInt($.trim($(obj).attr('data')));

        if(isMoreAddress==1){
            $.toast("活动产品不允许修改地址！", "text");
            return false
        }else if(istrue==1) {
            var redirection = encodeURIComponent(location.href);
            location.href = '/wap/myAddress?updateAddressURL=' + redirection+"&orderNo="+$("#copy-orderNo").text();
        }else {
            // alert("超过30分钟不允许修改地址!");
            $.toast("超过30分钟不允许修改地址！", "text");
            return false
        }
    }


    function copyToClipboard (text) {
        if(text.indexOf('-') !== -1) {
            var arr = text.split('-');
            text = arr[0] + arr[1];
        }
        var textArea = document.createElement("textarea");
        textArea.style.position = 'fixed';
        textArea.style.top = '0';
        textArea.style.left = '0';
        textArea.style.width = '2em';
        textArea.style.height = '2em';
        textArea.style.padding = '0';
        textArea.style.border = 'none';
        textArea.style.outline = 'none';
        textArea.style.boxShadow = 'none';
        textArea.style.background = 'transparent';
        textArea.value = text;
        document.body.appendChild(textArea);
        textArea.select();
        try {
            var successful = document.execCommand('copy');
            var msg = successful ? $.toast('复制成功！'):$.toast('复制失败！', 'cancel');
        } catch (err) {
            $.toast('该浏览器不支持点击复制到剪贴板!');
        }
        document.body.removeChild(textArea);
    }

    //订单状态
    setOrderStatus();
function setOrderStatus(){
   var payOrderStatus= $('.pay-order-status').html();
   if(payOrderStatus!=null && payOrderStatus!=""){
       if(payOrderStatus=='702'){
           $('.pay-order-status').html("已付款，待发货");
       }else if(payOrderStatus=='703'){
           $('.pay-order-status').html("已发货");
       }else if(payOrderStatus=='701'){
           $('.pay-order-status').html("待付款");
       }else if(payOrderStatus=='704'){
           $('.pay-order-status').html("待评价");
       }
   }else{
       $('.pay-order-status').html("订单错误！");
   }
}

</script>
</html>